<template>
	<rui-card>
		<view class="menu">
			<view class="menu_item" v-for="(item, index) in data" :key="index" @click="onMenu(item)">
				<view class="menu_item_icon">
					<image :src="item.icon" class="menu_item_icon_image" mode=""></image>
				</view>
				<view class="menu_item_name">
					{{item.name}}
				</view>
			</view>
		</view>
	</rui-card>
</template>

<script setup>
	import {
		ref
	} from "vue"
	
	defineProps({
		data: Array
	})
	// let menu = ref([{
	// 		icon: "/static/images/menu/video.png",
	// 		name: "使用教程",
	// 		color: "#67c7f2",
	// 		path: "/pages/user/help/help",
	// 		type: "path"
	// 	},
	// 	{
	// 		icon: "/static/images/menu/service.png",
	// 		name: "客服中心",
	// 		color: "#67c7f2",
	// 		path: "/pages/user/service/service",
	// 		type: "path"
	// 	},
	// 	{
	// 		icon: "/static/images/menu/shop.png",
	// 		name: "官方商城",
	// 		color: "#106cae",
	// 		path: "",
	// 		type: "miniapp"
	// 	},
	// ])

	const onMenu = (e) => {
		if (e.category == 'path') {
			uni.$rui.route(e.path)
		}

		if (e.category == 'miniapp') {
			wx.navigateToMiniProgram({
				appId: 'wx91d27dbf599dff74', // 京东小程序的AppID
				path: e.path,
			})
		}

	}
</script>

<style lang="scss" scoped>
	.menu {
		display: flex;
		justify-content: space-between;

		&_item {
			width: 50%;
			text-align: center;

			&_name {
				font-size: 28rpx;
			}

			&_icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin: 0 auto 10rpx;
				line-height: 100rpx;

				&_image {
					width: inherit;
					height: inherit;
				}
			}
		}
	}
</style>